<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="500px" @ok="handleSubmit"> </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue'
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'

  export default defineComponent({
    name: 'tableDrawer',
    components: { BasicDrawer },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true)
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false })
        isUpdate.value = !!data?.isUpdate
      })

      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'))

      async function handleSubmit() {
        try {
          setDrawerProps({ confirmLoading: true })
          closeDrawer()
          emit('success')
        } finally {
          setDrawerProps({ confirmLoading: false })
        }
      }

      return {
        registerDrawer,
        getTitle,
        handleSubmit,
      }
    },
  })
</script>
